<template>
  <div class="addBanner">
    <Form
      :model="formItem"
      :label-width="150"
      :rules="ruleValidate"
      ref="formItem"
    >
      <FormItem label="排序" prop="sort">
        <InputNumber :min="1" v-model="formItem.sort"></InputNumber>
      </FormItem>
      <FormItem label="添加封面图片(尺寸:710*322)：" class="form-noheight" prop="img">
        <upload-pic-input v-model="formItem.img"></upload-pic-input>
      </FormItem>
      <!-- <FormItem label="图片" prop="img">
        <div style="display: flex">
          <img
            v-if="formItem.img"
            :src="formItem.img"
            alt=""
            style="width: 170px; height: 60px; margin-right: 15px"
          />
          
       
         <div
            style="
              cursor: pointer;
              width: 58px;
              height: 58px;
              line-height: 58px;
              border: 1px dashed #ddd;
              text-align: center;
            "
            @click="showClip = true"
          >
            <Icon type="ios-camera" size="20"></Icon>
          </div> 
        </div>
      </FormItem> -->
      <FormItem label="跳转类型" prop="jumpType">
        <RadioGroup v-model="formItem.jumpType">
          <Radio :label="0">平台展示</Radio>
          <Radio :label="1">外部展示</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="跳转地址" v-if="formItem.jumpType == 1" prop="link">
        <Input v-model="formItem.link" placeholder="请输入跳转地址" />
      </FormItem>
      <FormItem
        label="跳转参数:"
        v-if="formItem.jumpType == 0"
        prop="activityId"
      >
        <div style="display: flex">
          <Select
            v-model="formItem.activityId"
            placeholder="选择活动"
            style="max-width: 150px; margin-left: 10px"
          >
            <Option :value="item.id" v-for="item in activitylist" :key="item.id">{{item.title}}</Option>
          </Select>
        </div>
      </FormItem>
      <FormItem label="显示时间:" prop="showtime">
        <Input
          v-model="formItem.showtime"
          placeholder="显示时间"
          style="width: 100px"
        />秒
      </FormItem>
      <FormItem label-width="0">
        <div style="text-align: center; width: 100%">
          <Button type="primary" @click="handleSubmit('formItem')">保存</Button>
        </div>
      </FormItem>
    </Form>
    <Modal v-model="showClip" title="自动生成截图" width="800">
      <Card>
        <clip
          :autoCropWidthNum="702"
          :autoCropHeightNum="250"
          :fixedNumber="[2.808, 1]"
          v-if="showClip"
          @postImgSucess="beforepostImgSucess"
        ></clip>
      </Card>
      <div slot="footer">
        <Button type="primary" size="large" @click="postImgSucess">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
import clip from "./clip.vue";
import { scSlideShowAdd, scSlideShowUpdate,getAllByTypeData } from "@/api/index";
import { mapActions, mapMutations, mapState } from "vuex";
// import Clip from '../artManage/clip.vue';
export default {
  components: {
    clip,
  },
  props: {
    editObj: {
      type: Object,
      default: {},
    },
  },
  components: {
    uploadPicInput,
  },
  data() {
    return {
      showClip: false,
      defaultList: [],
      activitylist:[],
      uploadList: [],
      beforepostImgSucessUrl: "", //刚剪裁完毕的图片
      formItem: {
        jumpType: 0,
        isOnline: 1,
        sort: 1,
        img: "",
      },
      updata: {},
      host: "",
      ruleValidate: {
        showSys: [
          {
            required: true,
            message: "请选择展示系统",
            trigger: "blur",
            type: "array",
          },
        ],
        showtime: [
          {
            required: true,
            message: "请填写轮播图时间",
            trigger: "blur",
          },
        ],
        activityId: [
          {
            required: true,
            message: "请选择活动",
            trigger: "blur",
          
          },
        ],
        sort: [
          {
            required: true,
            message: "请填写展示顺序",
            trigger: "blur",
            type: "number",
          },
        ],
        img: [
          {
            required: true,
            message: "请上传轮播图",
            trigger: "change",
          },
        ],
        jumpType: [
          {
            required: true,
            message: "请选择跳转类型",
            trigger: "change",
            type: "number",
          },
        ],
      },
    };
  },
  mounted() {
    getAllByTypeData('scActivity').then(res=>{
        this.activitylist = res.result;
    })
    if (this.editObj.id) {
      this.formItem = {
        ...this.editObj,
        jumpType: this.editObj.jumpType ? 1 : 0,
      };
    }
  },
  watch: {},
  methods: {
    beforepostImgSucess(url) {
      this.beforepostImgSucessUrl = url;
    },
    postImgSucess() {
      this.showClip = false;
      this.formItem.img = this.beforepostImgSucessUrl;
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log(this.formItem);
          if (this.editObj.id) {
            scSlideShowUpdate(this.formItem).then((res) => {
              if (res.code == 200) {
                this.$emit("onhandleSuccess");
              }
            });
          } else {
            scSlideShowAdd(this.formItem).then((res) => {
              if (res.code == 200) {
                this.$emit("onhandleSuccess");
              }
            });
          }
        } else {
        }
      });
    },
    nativeFlagData() {
      console.log(this.formItem.nativeFlag);
      if (this.formItem.nativeFlag == "testing") {
        //选择测评
        this.setJumpFrom("banner");
        this.$router.push({
          name: "examManage_page",
        });
      } else if (this.formItem.nativeFlag == "article") {
        //选择文章
        this.setJumpFrom("banner");
        this.$router.push({
          name: "artList_page",
        });
      }
    },
    getpolicy(file) {
      console.log(file);
      base64Upload({ file: file.files }).then((res) => {
        console.log(res);
      });
      return;
      let timestamp = Date.parse(new Date());
      let data = {
        uri: `/api/app/img/uri/${timestamp}.png`,
        length: file.size,
        method: "POST",
      };
      this.getPicBatchUploadSign([data]).then((res) => {
        if (res.errorCode == 0) {
          let data = res.data[0];
          this.host = data.host;
          this.updata = {
            policy: data.policy,
            authorization: data.authorization,
          };
          this.$nextTick(() => {
            this.$refs.upload.post(file);
          });
        }
      });
    },
    handleSuccess(res, file) {
      console.log("上传结果：", res);
      this.formItem.img = this.host + res.url;
      this.$forceUpdate();
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "提示",
        desc: "请选择图片",
      });
    },
    handleBeforeUpload(file) {
      this.getpolicy(file);
      return false;
    },
  },
};
</script>

<style>
</style>